<template>
  <div class="container-height">
    <div id="on-scene" v-show="noData"></div>
    <div class="no-data" v-show="!noData">暂无数据</div>
  </div>
</template>

<script>
function hexToRgba(hex, opacity) {
  return `rgba(${parseInt("0x" + hex.slice(1, 3))}, ${parseInt("0x" + hex.slice(3, 5))}, ${parseInt("0x" + hex.slice(5, 7))}, ${opacity})`;
}

export default {
  name: "HomeOnScene",
  components: {},
  data() {
    return {
      onSceneData: [],
      colors: ['#5ee8b2', '#fdc62a', '#fa68c0', '#2EC7C9', '#32CD32', '#FF69B3'],
      noData: true,
      date: []
    };
  },

  methods: {
    getOnScene (numbers, date) {
      let arr = [];
      for (let i = 0; i < 1; i++) {
        arr.push({
          name: "在场人数",
          type: 'line',
          smooth: true,
          areaStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: hexToRgba(this.colors[i], 0.6)
                }, {
                  offset: 1,
                  color: hexToRgba(this.colors[i], 0.1)
                }],
                globalCoord: false
              }
            }
          },
          data: numbers
        })
      }
      this.date = date;
      this.onSceneData = arr;
      this.getOnSceneInfo();
    },

    getOnSceneInfo() {
      var echarts = require('echarts');
      var myChart = echarts.init(document.getElementById("on-scene"));
      var option = {
        color: this.colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              type: "dotted",
              opacity: 0.6
            }
          }
        },
        grid: {
          left: "8%",
          right: "4%",
          top: "14%",
          bottom: "0%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          // 线条是否从0开始
          boundaryGap: false,
          // 轴线文字
          axisLabel: {
            show: true,
            textStyle: {
              color: "rgba(255, 255, 255, 0.5)",
              lineHeight: 24
            },
            interval: 0,
            rotate: 45
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: this.date
        },
        yAxis: {
          type: 'value',
          // 分隔线样式设置
          splitLine: {
            show: true,
            lineStyle: {
              color: ['rgba(255, 255, 255, 0.06)'],
              type: "dashed"
            }
          },
          // 轴线文字
          axisLabel: {
            show: true,
            textStyle: {
              color: "rgba(255, 255, 255, 0.5)"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
        },
        series: this.onSceneData
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style  scoped>
  .container-height,
  #on-scene {
    width: 100%;
    height: 100%;
  }

  .no-data{
    width: 100%;
    text-align: center;
    margin-top: 18%;
    color: rgba(255, 255, 255, 0.5);
  }
</style>
